<html>
  <head>
	  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>i5ting_ztree_toc:vue基础和应用</title>
		<link href="toc/style/github-bf51422f4bb36427d391e4b75a1daa083c2d840e.css" media="all" rel="stylesheet" type="text/css"/>
		<link href="toc/style/github2-d731afd4f624c99a4b19ad69f3083cd6d02b81d5.css" media="all" rel="stylesheet" type="text/css"/>
		<link href="toc/css/zTreeStyle/zTreeStyle.css" media="all" rel="stylesheet" type="text/css"/>
	  <style>
		pre {
		    counter-reset: line-numbering;
		    border: solid 1px #d9d9d9;
		    border-radius: 0;
		    background: #fff;
		    padding: 0;
		    line-height: 23px;
		    margin-bottom: 30px;
		    white-space: pre;
		    overflow-x: auto;
		    word-break: inherit;
		    word-wrap: inherit;
		}

		pre a::before {
		  content: counter(line-numbering);
		  counter-increment: line-numbering;
		  padding-right: 1em; /* space after numbers */
		  width: 25px;
		  text-align: right;
		  opacity: 0.7;
		  display: inline-block;
		  color: #aaa;
		  background: #eee;
		  margin-right: 16px;
		  padding: 2px 10px;
		  font-size: 13px;
		  -webkit-touch-callout: none;
		  -webkit-user-select: none;
		  -khtml-user-select: none;
		  -moz-user-select: none;
		  -ms-user-select: none;
		  user-select: none;
		}

		pre a:first-of-type::before {
		  padding-top: 10px;
		}

		pre a:last-of-type::before {
		  padding-bottom: 10px;
		}

		pre a:only-of-type::before {
		  padding: 10px;
		}

		.highlight { background-color: #ffffcc } /* RIGHT */
		</style>
  </head>
  <body>
	  <div>
				<div style='width:25%;'>
						<ul id="tree" class="ztree" style='width:100%'>

						</ul>
				</div>
        <div id='readme' style='width:70%;margin-left:20%;'>
          	<article class='markdown-body'>
            	<h4 id="vue-">vue简介</h4>
<pre><code>    vue是一套用于构建用户界面的渐进式框架。
    与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。
    Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
    另一方面，当与现代化的工具链以及各种支持类库结合使用时，
    Vue 也完全能够为复杂的单页应用提供驱动。

    官网链接：https://cn.vuejs.org/v2/guide/
    demo地址：https://gitee.com/Implicitpawn/vue-basics.git

</code></pre><h4 id="vue-cli">vue-cli</h4>
<pre><code>    安装：npm install -g @vue/cli
    检测：vue --version
    创建项目：vue create 项目名称   （创建过程一路回车，有需求的可以选择，比如选择yarn或者npm）

    npm i

    npm run serve

    打包：npm run build

    官网：https://cli.vuejs.org/zh/guide/

</code></pre><h4 id="cli-3-4-">cli-3/4 项目基础配置</h4>
<pre><code>const path = require(&#39;path&#39;)
module.exports = {
    // 基本路径
    publicPath: &#39;./&#39;,
    // 输出文件目录
    outputDir: &#39;dist&#39;,
    // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
    // assetsDir: &quot;./&quot;,
    // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径
    indexPath: &#39;./&#39;,
    // eslint-loader 是否在保存的时候检查
    lintOnSave: true,
    // webpack配置
    chainWebpack: config =&gt; {
        // 配置别名
        config.resolve.alias
            .set(&quot;@&quot;, path.resolve(&quot;src&quot;))
            .set(&quot;@img&quot;, path.resolve(&quot;src/assets/images&quot;))
            .set(&quot;@css&quot;, path.resolve(&quot;src/assets/styles/css&quot;))
            .set(&quot;@less&quot;, path.resolve(&quot;src/assets/styles/less&quot;));
    },
    // 生产环境是否生成 sourceMap 文件
    productionSourceMap: false,
    devServer: {
        port: 8888,  // 端口
        open: true, // 自动开启浏览器
        compress: false, // 开启压缩
        proxy: {
            &#39;/api&#39;: {
                target: &#39;http://***/api&#39;,
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    &#39;^/api&#39;: &#39;&#39;
                }
            }
        }
    },
}

</code></pre><h4 id="-">基础指令</h4>
<ul>
<li><p><code>{{}}</code>:插值表达式</p>
<pre><code>  作用:将vue对象中的数据以及表达式显示到vue托管区域中

  {{这里书写vue对象中data里面的数据或者表达式}}
</code></pre></li>
<li><p><code>v-for</code>:循环输出HTML元素</p>
<pre><code>  &lt;div v-for=&#39;(item,index) in list&#39; :key = &#39;index&#39;&gt;{{item.name}}&lt;/div&gt;
</code></pre></li>
<li><p><code>v-text</code>:输出文本数据</p>
<pre><code>  &lt;span v-text=&#39;name&#39;&gt;&lt;/span&gt;
</code></pre></li>
<li><p><code>v-html</code>:输出HTML结构数据</p>
<pre><code>  &lt;div v-html=&#39;name&#39;&gt;&lt;/div&gt;

  data：{
      name：&#39;&lt;span&gt;zs&lt;/span&gt;&#39;
  }
</code></pre></li>
<li><p><code>v-if</code>：根据表达式值的真假决定元素的显示隐藏</p>
<pre><code>  // isShow为true显示div 为false隐藏div
  // v-if是直接操作DOM 即隐藏时会将该div从DOM结构中移除
  &lt;div v-if=&#39;isShow&#39;&gt;&lt;/div&gt;
</code></pre></li>
<li><p><code>v-show</code>: 根据表达式值的真假决定元素的显示隐藏</p>
<pre><code>  // isShow为true显示div 为false隐藏div
  // v-show是操作div的样式 显示时添加 style = &#39;display:block&#39;; 隐藏时添加style = &#39;display:none&#39;
  &lt;div v-if=&#39;isShow&#39;&gt;&lt;/div&gt;
</code></pre></li>
<li><p><code>v-cloak</code>:解决表达式闪烁问题</p>
<pre><code>  1. 定义一个样式
  &lt;style&gt;
      [v-cloak]{
          display:none
      }
  &lt;/style&gt;

  2. 使用

  &lt;div v-cloak&gt;{{name}}&lt;/div&gt;

  原理:当vue.js文件还没有加载出来时 使用[v-cloak]样式作用于当前指令所在标签,当vue.js能够起作用时,会自动删除v-cloak指令
</code></pre></li>
<li><p><code>v-bind</code>:动态给标签或者组件绑定属性</p>
<pre><code>  &lt;div v-bind:class = &#39;box&#39;&gt;&lt;/div&gt;

  // 使用:简写v-bind
  &lt;div :class = &#39;box&#39;&gt;&lt;/div&gt;

  // 当绑定的属性值是常量字符串+变量时 我们在绑定这个属性时 是需要绑定一个对象,这个对象的键就是需要绑定的属性名 这个对象的值就是常量字符串+变量
  &lt;a v-bind=&quot;{href:&#39;http://itcast.cn/index/&#39;+id}&quot;&gt;跳转&lt;/a&gt;
</code></pre></li>
<li><p><code>v-on</code>:绑定事件</p>
<pre><code>  &lt;div v-on:click = &#39;click&#39;&gt;&lt;/div&gt;
  &lt;div @click = &#39;click&#39;&gt;&lt;/div&gt;
</code></pre></li>
<li><p><code>v-model</code>：双向数据绑定</p>
<pre><code>  // 可以使用的标签:input textarea select 组件
  &lt;input v-model=&#39;name&#39;&gt;&lt;/input&gt;
</code></pre></li>
</ul>
<h4 id="-">事件修饰符</h4>
<ul>
<li><code>.stop</code>：阻止冒泡；</li>
<li><code>.prevent</code>：阻止浏览器默认行为；</li>
<li><code>capture</code>：实现捕获触发事件的机制；</li>
<li><code>.self</code>：实现只有点击当前元素的时候，才会触发当前处理函数；==只阻止自身的事件冒泡，并不会阻止其他元素的事件冒泡行为！==</li>
<li><code>.once</code>：只触发一次事件；</li>
</ul>
<h4 id="-">样式</h4>
<ul>
<li><p>用<code>v-bind</code>绑定<code>class</code>属性：使用样式为一个数组列如：</p>
<pre><code>  &lt;p :class=&quot;[&#39;color&#39;,&#39;bgc&#39;,&#39;weight&#39;,&#39;size&#39;]&quot;&gt;天安门广场前又有人自杀了！！&lt;/p&gt;
</code></pre></li>
<li><p>在数组中使用三元表达式的方式添加类样式；列如：</p>
<pre><code>  &lt;p :class=&quot;[&#39;color&#39;,isClass ? &#39;bgc&#39; : &#39;&#39;,&#39;weight&#39;,&#39;size&#39;]&quot;&gt;天安门广场前又有人自杀了！！&lt;/p&gt;
</code></pre></li>
<li><p>在数组中使用对象代替三元表达式，提高代码可读性；列如：</p>
<pre><code>  &lt;p :class=&quot;[&#39;color&#39;,{&#39;bgc&#39;:false},&#39;weight&#39;,&#39;size&#39;]&quot;&gt;天安门广场前又有人自杀了！！&lt;/p&gt;
</code></pre></li>
<li><p>使用对象的方式添加类样式，前面是类名，后面是标识符；列如：</p>
<pre><code>      isClass: {color:true,bgc:true,size:true,weight:false}
  &lt;p :class=&quot;isClass&quot;&gt;天安门广场前又有人自杀了！！&lt;/p&gt;
</code></pre></li>
<li><p>直接在元素上通过：<code>style</code>的形式，书写样式对象</p>
<pre><code>  &lt;h1 :style=&quot;{color: &#39;red&#39;, &#39;font-size&#39;: &#39;40px&#39;}&quot;&gt;这是一个善良的H1&lt;/h1&gt;
</code></pre></li>
<li><p>将样式对象，定义到<code>data</code>中，并直接引用到：<code>style</code>中</p>
<ul>
<li>在data上定义样式：<pre><code>data: {
   h1StyleObj: { color: &#39;red&#39;, &#39;font-size&#39;: &#39;40px&#39;, &#39;font-weight&#39;: &#39;200&#39; }
}
</code></pre></li>
<li>在元素中，通过属性绑定的形式，将样式对象应用到元素中<pre><code>  &lt;h1 :style=&quot;h1StyleObj&quot;&gt;这是一个善良的H1&lt;/h1&gt;
</code></pre></li>
</ul>
</li>
<li>在<code>style</code>中通过数组，引用多个<code>data</code>上的样式对象<ul>
<li>在data上定义样式<pre><code>  data: {
       h1StyleObj: { color: &#39;red&#39;, &#39;font-size&#39;: &#39;40px&#39;, &#39;font-weight&#39;: &#39;200&#39; },
       h1StyleObj2: { fontStyle: &#39;italic&#39; }
    }
</code></pre></li>
<li>在元素中，通过属性绑定的形式，将样式对象应用到元素中：<pre><code> &lt;h1 :style=&quot;[h1StyleObj, h1StyleObj2]&quot;&gt;这是一个善良的H1&lt;/h1&gt;
</code></pre></li>
</ul>
</li>
</ul>
<hr>
<h4 id="component">component</h4>
<ul>
<li><p>组件<code>component</code>是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义元素，vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用<code>is</code>特性进行了扩展的原生HTML元素。</p>
</li>
<li><p>所有的vue组件同时也都是vue的实例，所以可接受相同的选项对象（除了一些根级特有的选项）并提供相同的生命周期钩子。</p>
</li>
</ul>
<h6 id="extend-vue-">extend创建全局vue模板</h6>
<ul>
<li>在创建模板的过程中template指向的模板字符串，只能有唯一一个根元素<pre><code>  var con1 = Vue.extend({
      template: &quot;&lt;h3&gt;这是使用extend创建的模板&lt;/h3&gt;&quot;
  })
</code></pre><h6 id="-vue-component-">使用<code>vue.component</code>注册自己的组件</h6>
</li>
<li>如果使用<code>vue.component</code>定义全局组件的时候，组件名称使用驼峰命名，在引用组件的时候，大写的驼峰改为小写的字母，同时两个单词之间使用<code>-</code>连接</li>
<li><p>如果不使用驼峰则可直接使用</p>
<pre><code>  //使用vue.component注册组件的多种方法
  Vue.component(&#39;mycon1&#39;, con1);
  Vue.component(&#39;myCon1&#39;, con1);
  // Vue.component(&#39;newtem&#39;,Vue.extend({template:&#39;#tem&#39;}))
  Vue.component(&#39;newtem&#39;, {
      template: &#39;#tem&#39;
  })

  import a from &#39;a&#39;;
  Vue.use(a);
</code></pre></li>
</ul>
<h6 id="-">私有组件</h6>
<ul>
<li>可以通过<code>components</code>创建一个vue实例，vue实例与vue实例之间不能相互引用内部<code>data</code>数据;</li>
<li>在私有组件中的<code>data</code>与父组件的<code>data</code>不同，在私有组件中，<code>data</code>属性不能直接返回一个对象，而只能通过函数返回一个对象，而且这个对象不能在全局定义引用，如果多个组件引用同一个数据地址会使所用组件的数据一起变化；<pre><code> &lt;script&gt;
     import a from &#39;a&#39;;
     var vm = new Vue({
         el: &#39;#app1&#39;,
         components: {
             a
         }
     })
 &lt;/script&gt;
</code></pre></li>
</ul>
<h4 id="directive">directive</h4>
<h6 id="-">钩子函数</h6>
<ul>
<li><code>bind:function(){}</code> 每当指令绑定到元素上的时候，会立即执行bind函数，只执行一次</li>
<li><code>inserted</code>:  表示元素插入到DOM中的时候，会执行<code>inserted</code>函数，触发一次</li>
<li><p><code>updated</code>: 当<code>vnode</code>更新的时候，会执行<code>uodated</code>，可能会触发多次</p>
</li>
<li><p>钩子函数参数：</p>
<pre><code>参数1：el
参数2：binding----binding是一个对象，里面包含了：
</code></pre></li>
<li><p>定制全局指令</p>
<pre><code>  //定制全局指令---------------
  Vue.directive(&#39;color&#39;, {
      bind: function (el, binding) {
          el.style.color = binding.value;//参数必须为字符串
      }
  })
  //一般行为动作写在inserted里面，样式一般写在bind里面
  Vue.directive(&#39;focus&#39;, {
      inserted: function (el, binding) {
          el.focus()
      }
  })
</code></pre></li>
<li><p>定制私有指令</p>
<pre><code>  //把指令定制到操作区域的实例对象里面
  directives: {
      &#39;color&#39;: {
          bind: function (el, binding) {
              el.style.color = binding.value;
          }
      },
      &#39;weight&#39;: function (el, binding) {
          el.style.fontWeight = binding.value;
      }
  }
</code></pre><h4 id="filters">filters</h4>
<pre><code>  // 私有过滤器
  new Vue({
          filters：{
                  // 每一个过滤器都是一个方法
                  `过滤器名称`：function(input,arguments){
                          return `对input进行处理的代码逻辑`
                  }
          }
  })

  // 全局过滤器
  Vue.filter({
              // 在对象内部定义过滤器
              `过滤器名称`：function(input,arguments){
                      return `对input进行处理的代码逻辑`
              }
      })
</code></pre><h4 id="axios">axios</h4>
<pre><code>    1. 安装 axios
    npm install axios --save

    2. 因为axios不支持Vue.use()方法,所以为了所有组件能够使用,需要绑定到Vue原型中
    import axios from &#39;axios&#39;;
    Vue.prototype.$http = axios

    3. 发送请求参照vue-resource
    this.$http.get(url).then(function(res){
            // 返回的响应数据在res.data属性中
            console.log(res.data);
    })
</code></pre><h4 id="router">router</h4>
<pre><code>      1. 安装vue-router
      `npm install vue-router --save`

      2. App.vue中书写跳转链接

      &lt;router-link to=&quot;/login&quot;&gt;登录&lt;/router-link&gt;
      &lt;router-link to=&quot;/register&quot;&gt;注册&lt;/router-link&gt;

      &lt;!-- 路由占位符 --&gt;
      &lt;router-view&gt;&lt;/router-view&gt;

      3. main.js中集成vue-router并配置路由规则

      // 1. 导入vue-router
      import vueRouter from &#39;vue-router&#39;;
      // 2. 将vueRouter对象绑定到Vue对象上
      Vue.use(vueRouter);

      // 3. 导入路由规则对应的组件对象
      import login from &#39;./components/account/login.vue&#39;;
      import register from &#39;./components/account/register.vue&#39;;

      // 4.定义路由规则
      var router1 = new vueRouter({
              routes:[
                      {path:&#39;/login&#39;,component:login},
                      {path:&#39;/register&#39;,component:register}
              ]
              });

      // 5. 利用Vue对象进行解析渲染
      new Vue({
              el:&#39;#app&#39;,
              // 使用路由对象实例
              router:router1,
              render:c=&gt;c(App)
      });
</code></pre><h4 id="vuex">vuex</h4>
</li>
</ul>
<blockquote>
<p>官方文档<a href="https://vuex.vuejs.org/zh-cn/">https://vuex.vuejs.org/zh-cn/</a></p>
</blockquote>
<pre><code>        1. 安装vuex
        npm install vuex --save

        2. main.js中引入安装
        import Vuex from &#39;vuex&#39;;
        Vue.use(Vuex);

        3. 配置vuex
        //Vuex配置
        const store = new Vuex.Store({
                // state类似vue实例中的data 用来存放数据
                state: {
                        // 可以设置一些需要全局使用的数据
                        username:&#39;zxx&#39;
                },
                // mutations类似vue实例中的methods
                mutations: {
                        // 用来处理数据 如数据删除更新等操作
                        update(state,name){
                                state.username = name;
                        }
                }
        })

        3. 组件中通过this.$store使用

                console.log(this.$store.state.username);

        4. 调用mutations方法更新数据

                // 第一个参数是 mutations 中定义的对应的方法名 第二个参数是需要更新的数据
                // 具体更新逻辑在update方法中实现
                this.$store.commit(&#39;update&#39;,&#39;lxy&#39;);调用update方法更新用户名
                this.$store.dispath(&#39;update&#39;,&#39;lxy&#39;); // 异步调用
</code></pre><h4 id="less">less</h4>
<pre><code>安装less-loader
npm install less less-loader --save-dev
</code></pre><h4 id="-">过度动画</h4>
<pre><code>    1、vue1.0中，需要在实现过渡动画的元素上使用 transition 特性，示例：
    &lt;div v-if=&quot;show&quot; transition=&quot;my-transition&quot;&gt;&lt;/div&gt; ,my-transition 可以有程序员自定义名称

    2、 vue2.0中 transition特性的写法变成了 &lt;transition&gt;&lt;/transition&gt;的写法
    &lt;transition name=&quot;fade&quot;&gt;
            &lt;p v-if=&quot;show&quot;&gt;hello&lt;/p&gt;
    &lt;/transition&gt;

    3. 动画钩子函数

    vue1.0中动画钩子函数
    - 过渡动画进入
    beforeEnter:function(el){}      过渡动画进入之前，一般在这个方法中定义目标元素的初始位置
    enter:function(el,done){}       过渡动画进入中，在这个方法中定义目标元素的结束位置
    afterEnter:function(el){}       过渡动画结束后，通常在这个方法里面重置初始值
    enterCancelled:function(el){}   取消过渡动画时被调用

    - 过渡动画离开
    beforeLeave:function(el){}      动画离开之前触发
    leave:function(el){}            过渡动画进入中触发
    afterLeave:function(el){}       过渡动画离开结束后
    leaveCancelled:function(el){}   取消过渡动画时被调用

    vue2.0中动画钩子函数
    - 过渡动画进入
    before-enter      过渡动画进入之前，一般在这个方法中定义目标元素的初始位置
    enter             过渡动画进入中，在这个方法中定义目标元素的结束位置
    after-enter       过渡动画结束后，通常在这个方法里面重置初始值
    enter-cancelled   取消过渡动画时被调用

    - 过渡动画离开
    before-leave      动画离开之前触发
    leave             过渡动画进入中触发
    after-leave       过渡动画离开结束后
    leave-cancelled   取消过渡动画时被调用
</code></pre><h4 id="-">父组件向子组件传值</h4>
<pre><code>    子组件sonComponent
    父组件fatherComponent

    sonComponent:

    1. 定义props数组对象,数组对象中的属性用于接收父组件传递过来的数据

    new Vue({
            props:[&#39;id&#39;], // id即为用于接收父组件传递过来数据的属性
    })

    fatherComponent:

    1. 使用子组件时绑定子组件props中定义的属性进行传值

    // 这里的id需要和子组件props中定义的属性一致
    &lt;sonComponent v-bind:id = &#39;需要传递的数据&#39;&gt;&lt;/sonComponent&gt;
</code></pre><h4 id="-">子组件向父组件传值</h4>
<pre><code>    子组件sonComponent
    父组件fatherComponent

    sonComponent:

    1. 发布事件

    this.$emit(&#39;事件名称&#39;,&#39;需要传递的数据&#39;);

    2. 事件的触发

    send(){
            this.$emit(&#39;事件名称&#39;,&#39;需要传递的数据&#39;)
    }

    fatherComponent:

    1. 订阅事件

    // 父组件中使用子组件(`事件名称`和子组件中`this.$emit(&#39;事件名称&#39;,&#39;需要传递的数据&#39;)`里的事件名称一致)
    &lt;sonComponent v-on:&#39;事件名称&#39; = &#39;事件处理函数&#39;&gt;&lt;/sonComponent&gt;

    2. 获取数据

    methods：{
            事件处理函数:function(data){
                    // data 就是子组件sonComponent中需要传递的数据
            }
    }
</code></pre><h4 id="-">非父子组件传值</h4>
<blockquote>
<p>使用<strong>event bus(事件总线)</strong>：利用一个共享的vue实例对象来进行数据的传递. 同时采用的是 <strong>发布-订阅者模式</strong></p>
</blockquote>
<pre><code>    componentA  componentB进行数据传递(B-&gt;A)

    **定义一个公有的Vue实例,保证两个组件都能够使用,一般在一个单独的js文件中导出一个Vue实例,
    然后在componentA和componentB组件中导入该实例进行使用**

    export default var vm = new Vue();

    componentB：(B组件时需要传递数据的组件)

    1. 进行事件的发布(注册)

    vm.$emit(&#39;事件名称&#39;,&#39;需要传递的数据&#39;)

    2. 事件的触发(用于发布事件)

    send(){
            this.$emit(&#39;事件名称&#39;,&#39;需要传递的数据&#39;)
    }

    componentA：(A组件是接收数据的组件)

    1. 订阅事件

    vm.$on(&#39;事件名称&#39;,function(data){
            // 此处的data就是 发布组件中传递过来的数据
    })
</code></pre>
          	</article>
        </div>
		</div>
  </body>
</html>
<script type="text/javascript" src="toc/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="toc/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="toc/js/ztree_toc.js"></script>
<script type="text/javascript" src="toc_conf.js"></script>

<SCRIPT type="text/javascript" >
<!--
$(document).ready(function(){
    var css_conf = eval(markdown_panel_style);
    $('#readme').css(css_conf)

    var conf = eval(jquery_ztree_toc_opts);
		$('#tree').ztree_toc(conf);
});
//-->
</SCRIPT>
